<template>
  <view>
    <view v-if="isloding" style="text-align: center;margin-top: 50rpx;">
      <u-loading size="36"></u-loading>
    </view>
    <view v-for="(item, index) in list" :key="index" :class="isactive == index ? 'enter_bg' : 'no_bg'"
      @click="change(index)" v-if="!isloding">
      <view class="top">
        <view class="title">{{ item.name }}</view>
        <view style="display: flex;align-items: center;">
          <view class="money"><text style="font-size: 26rpx;">¥</text>{{ item.price }}</view>
          <view class="right_money">¥{{ item.old_price }}</view>
        </view>
      </view>
      <view class="message">{{ item.sub_name }}</view>
      <image src="@/static/chance.png" class="chance_img" v-if="isactive == index"></image>
    </view>
    <!-- <zdypay /> -->
    <!-- <pay-button :mode="2" :goods-type="1" goods-id="7314952223464112162" :biz-line="2" @getgoodsinfo="getGoodsInfo"
			@placeorder="userLogin" @pay="handleContinutePay" @error="handleError" /> -->
    <view class="sumit_btn" @click="submitBuy">立即支付</view>
  </view>
</template>

<script>
import {
  getProduct,
  placeOrder,
  wxplaceOrder,
  placeKsOrder
} from '@/api/home.js'
export default {
  data () {
    return {
      list: [],
      isactive: 0,
      city: '',
      isloding: true,
      isIOS: 0,
    };
  },
  onLoad (e) {
    this.city = e.city
    this.getproduct()
  },
  methods: {
    handleError (e) {
      console.log(e)
    },
    handleContinutePay (event) {
      const {
        status,
        outOrderNo,
        result
      } = event.detail;
      if (status === 'success') {
        const {
          code
        } = result;
        if (code === 0) {
          // 继续支付成功
          console.log('支付成功')
        }
      } else {
        // 继续支付失败
        console.log('支付失败')
      }
    },
    userLogin (event) {
      const {
        goodsId,
        goodsType
      } = event.detail
      return new Promise((resolve, reject) => {
        tt.login({
          success () {
            // 用户登录成功并获取信息，则调用 resolve 函数，跳转至提单页
            resolve();
          },
          fail (err) {
            console.log('err----', err)
            // 用户登录失败，则跳转提单页失败
            reject();
          }
        });
      });
    },
    getGoodsInfo (event) {
      console.log('页面中获取商品基本信息')
      return new Promise(resolve => {
        resolve({
          minLimits: 1,
          maxLimits: 1,
          dateRule: '周一至周日可用',
          relationType: 2,
          validation: {
            phoneNumber: {
              required: false // 手机号是否必填 
            },
            reservationType: 1,
            reservationCount: 2,
          },
          // 在 bind:getgoodsinfo 返回的 promise 的 resolve 函数中新增 marketingVersion 字段 
          marketingVersion: 1,
        });
      })
    },
    change (e) {
      this.isactive = e
    },
    async getproduct () {
      const {
        data
      } = await getProduct({
        city: this.$store.state.app.location
      })
      this.list = data
      this.isloding = false
    },
    submitBuy () {
      // 调用小程序的 getSystemInfo API  
      uni.getSystemInfo({
        success: (res) => {
          // 判断平台是否是 iOS  
          const isIOS = res.platform.toLowerCase().includes('ios') || res.system.toLowerCase().includes('ios');
          // 根据 isIOS 进行相应的处理  
          console.log(isIOS + isIOS ? '用户在使用 iOS 设备' : '用户不在使用 iOS 设备');
          this.sumit()
          // if (isIOS) {
          //   uni.showToast({
          //     title: 'iOS暂不支持购买',
          //     icon: 'none'
          //   })
          //   return
          // } else {
          //   this.sumit()
          // }
        },
        fail: (err) => {
          // 处理失败的情况  
          console.error('获取系统信息失败：', err);
        }
      });
      console.log('isios:' + this.isIOS);
    },
    // 下单
    async sumit () {
      // 判断平台
      // #ifdef MP-WEIXIN
      const {
        data,
        msg,
        code
      } = await wxplaceOrder({
        type: this.list[this.isactive].type,
        city: this.$store.state.app.location
      })
      if (code == 200) {
        let _this = this
        uni.requestPayment({
          provider: 'wxpay', //支付类型-固定值
          timeStamp: data.timeStamp, // 时间戳（单位：秒）
          nonceStr: data.nonceStr, // 随机字符串
          package: data.package, // 固定值
          signType: data.signType, //固定值
          paySign: data.paySign, //签名
          success: function (res) {
            console.log('success:' + JSON.stringify(res));
            uni.showToast({
              title: '支付成功',
              icon: 'none'
            })
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/tabbar/home/index'
              })
            }, 1000)
          },
          fail: function (err) {
            console.log('fail:' + JSON.stringify(err));
            console.log("支付失败");
          }
        });
      }
      // #endif
      // #ifdef MP-TOUTIAO
      const {
        data,
        msg,
        code
      } = await placeOrder({
        type: this.list[this.isactive].type,
        city: this.$store.state.app.location
      })
      if (code == 200) {
        let _this = this
        uni.requestPayment({
          provider: 'douyin',
          service: 5, // 不拉起字节跳动小程序收银台
          _debug: 1,
          payChannel: {
            default_pay_channel: 'alipay' // wx || alipay
          },
          orderInfo: data, // 订单信息
          success: (res) => {
            console.log(res)
            //code 0 成功 code 4 失败
            if (res.code == 0) {
              uni.showToast({
                title: '支付成功~',
                icon: 'none'
              })
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/tabbar/home/index'
                })
              }, 1000)
            }
            if (res.code == 1) {
              uni.showToast({
                title: '支付超时~',
                icon: 'none'
              })
            }
            if (res.code == 2) {
              uni.showToast({
                title: '支付失败~',
                icon: 'none'
              })
            }
            if (res.code == 3) {
              uni.showToast({
                title: '支付关闭~',
                icon: 'none'
              })
            }
            if (res.code == 4) {
              uni.showToast({
                title: '支付取消~',
                icon: 'none'
              })
            }
          },
          fail: (res) => {
            uni.showToast({
              title: '支付失败~',
              icon: 'none'
            })
            console.log(res); // 错误代码：CD0015 CD0025
          }
        });
      } else {
        uni.showToast({
          title: msg,
          icon: 'none'
        })
      }
      // #endif
      // #ifdef MP-KUAISHOU
      const {
        data,
        msg,
        code
      } = await placeKsOrder({
        type: this.list[this.isactive].type,
        city: this.$store.state.app.location
      })
      if (code == 200) {
        let _this = this
        uni.requestPayment({
          serviceId: '1',
          orderInfo: data, // 订单信息
          success: (res) => {
            //code 0 成功 code 4 失败
            uni.showToast({
              title: '支付成功~',
              icon: 'none'
            })
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/tabbar/home/index'
              })
            }, 1000)
          },
          fail: (res) => {
            // uni.showToast({
            // 	title: '支付失败~',
            // 	icon: 'none'
            // })
            console.log(res); // 错误代码：CD0015 CD0025
          }
        });
      } else {
        uni.showToast({
          title: msg,
          icon: 'none'
        })
      }
      // #endif
    }
  }
}
</script>

<style lang="scss" scoped>
.enter_bg {
  width: 702rpx;
  height: 174rpx;
  background: #E6FFF6;
  border-radius: 20rpx;
  margin: 0 auto;
  border: 1rpx solid #36c269;
  margin-top: 32rpx;
  overflow: hidden;
}

.no_bg {
  width: 702rpx;
  height: 174rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin: 0 auto;
  margin-top: 32rpx;
  overflow: hidden;
}

.sumit_btn {
  margin: 0 auto;
  margin-top: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 702rpx;
  height: 98rpx;
  background: #36c269;
  border-radius: 16rpx;
  font-size: 36rpx;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 34rpx;
  margin-left: 24rpx;

  .title {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #333333;
  }

  .money {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #FE592D;
  }

  .right_money {
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    text-decoration: line-through;
    margin-left: 16rpx;
    margin-right: 26rpx;
  }
}

.message {
  width: 540rpx;
  height: 34rpx;
  font-size: 24rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  margin-left: 24rpx;
  margin-top: 24rpx;
}

.chance_img {
  width: 82rpx;
  height: 54rpx;
  position: relative;
  margin-top: -20rpx;
  margin-left: 620rpx;
}
</style>